<template>
  <div class="Main">
    <div class="MainTitle">售后/退货列表</div>
    <div class="MianContent">
      <a-table
        :columns="listfields"
        :data-source="listData"
        :bordered="true"
        :pagination="false"
      >
        <div slot="action" slot-scope="row, index">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-bottom: 6px;
            "
          >
            <a-button style="margin-right:10px" type="primary" size="small" @click="toEdit(index)"
              >详情</a-button
            > 
            <a-popconfirm
              v-if="index.status == 1"
              placement="bottom"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleApply(1,index.id)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将同意该申请, 是否继续?</p>
              </template>
              <a-button type="primary" size="small">同意</a-button>
            </a-popconfirm>
            <a-button v-if="index.status == 1" style="margin-left:10px" type="default" size="small" @click="openJeject(index)"
              >拒绝</a-button
            >
          </div>
        </div>

        <div slot="status" slot-scope="row, index">
            {{row==0?'已取消':row==1?'待审核':row==2?'已同意':row==3?'已拒绝':''}}
        </div>
        <div slot="refund_type" slot-scope="row, index">
            {{row==1?'退款':row==2?'退货退款':row==3?'换货':''}}
        </div>

        <div slot="logo" slot-scope="row, index">
          <img
            style="width: 50px; height: 50px"
            @click="seeImg(index)"
            :src="row"
            alt=""
          />
        </div>
      </a-table>
      <Pagination
        :total="total"
        v-model="pageno"
        :pageSize.sync="pagesize"
        @change="handlePageChange"
        @onShowSizeChange="onShowSizeChange"
      ></Pagination>
      <a-modal
        title="售后详情"
        v-model="modalShow"
        centered
        :footer="null"
        ok-text="确认"
        :maskClosable="false" 
        cancel-text="取消"
        :width="700"
        @cancel="cancelBtn"
      >
        <div style="padding-left: 10px">
            <div class="flex" style="margin-bottom:20px;">
                <span>订单号：</span>
                <div>{{afterSaleInfo.order_no}}</div> 
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span>售后状态：</span>
                <div style="color: #F0532D;">{{afterSaleInfo.status==0?'已取消':afterSaleInfo.status==1?'待审核':afterSaleInfo.status==2?'已同意':afterSaleInfo.status==3?'已拒绝':''}}</div> 
            </div>
            <div class="flex" style="margin-bottom:20px;" v-if="afterSaleInfo.status == 3">
                <span style="flex-shrink:0;">拒绝原因：</span>
                <div style="color: #F0532D;">
                  {{afterSaleInfo.reject_reason}}
                </div>
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span>售后类型：</span>
                {{afterSaleInfo.refund_type==1?'退款':afterSaleInfo.refund_type==2?'退货退款':afterSaleInfo.refund_type==3?'换货':''}}
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span>退款金额：</span>
                <div>{{afterSaleInfo.refund_price}}</div> 
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span>退款原因：</span>
                <div>{{afterSaleInfo.refund_reason}}</div> 
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span>退款描述：</span>
                <div>{{afterSaleInfo.refund_desc}}</div> 
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span style="flex-shrink:0;">退款凭证：</span>
                <div class="flex flex-wrap">
                    <div style="margin: 0 10px 10px 0;" @click="seeImg(item)" v-for="(item,index) in afterSaleInfo.refund_img" :key="index"><img style="width:100px;height:100px;" :src="item" alt=""></div>
                </div>
            </div>
            <div class="flex" style="margin-bottom:20px;">
                <span style="flex-shrink:0;">退款商品：</span>
                <div>
                    <div class="flex align-center" style="margin: 0 10px 10px 0;" v-for="(item,index) in afterSaleInfo.product_list" :key="index">
                        <img style="width:30px;height:30px;margin-right:10px;flex-shrink:0;" :src="item.logo" alt="">
                        {{item.title}}
                    </div>
                </div>
            </div>
        </div>
      </a-modal>
      <a-modal v-model="LookImages" :footer="null" centered>
        <div style="margin: 10px">
          <img :src="SelectImg" style="width: 100%; height: 100%" />
        </div>
      </a-modal>
      <a-modal v-model="rejectShow" 
        ok-text="确认"
        :maskClosable="false" 
        cancel-text="取消"
        centered
        title="拒绝原因"
        @cancel="cancelFn"
        @ok="okFn"
        >
        <div style="margin: 10px">
            <a-input type="textarea" v-model="reject_reason" placeholder="请输入拒绝原因，不超过50字符~" :rows="4" :maxLength="50"></a-input>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import {
  afterSaleList,
  afterSaleDetail,
  afterSaleCheck,

} from "@/api/api.js";
export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      modalShow: false,
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      total: 0, //总数
      listData: [], //表格数据
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      keyword: "",
      listfields:[
        { title: 'ID', dataIndex: 'id', align: 'center', },
        { title: '订单号', dataIndex: 'order_no', align: 'center', },
        { title: '状态', dataIndex: 'status', scopedSlots: { customRender: 'status' }, align: 'center', },
        { title: '退款类型', dataIndex: 'refund_type', scopedSlots: { customRender: 'refund_type' }, align: 'center', },
        { title: '创建时间', dataIndex: 'create_time', align: 'center', },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center',width:150, },
      ],
      form: {
        title: "",
        sort: "",
        logo: [],
        type: 1
      },
      rules: {
        title: [{ required: true, message: "请输入名称!", trigger: "blur" }],
        sort: [{ required: true, message: "请选择分类类型!", trigger: "blur" }],
        logo: [{ type:'array',required: true, message: '请上品牌icon图', trigger: 'change', }, ],
      },
      LookImages: false,
      SelectImg: "",
      current:'1',

      itemId:null, //
      afterSaleInfo:{},
      reject_reason:'', //拒绝原因
      rejectShow:false
    };
  },
  computed: {
    // ...mapState({
    //   listfields: (state) => state.ProductBrand.fields, //获取table头
    // }),
  },
  mounted() {
    // this.GetFields();
    this.GetList();
  },
  methods: {
    // ...mapActions({
    //   GetFields: "ProductBrand/GetFields", //获取table头
    // }),

    // 查看图片
    seeImg(row) {
      const that = this;
      that.LookImages = true;
      that.SelectImg = row;
    },

    // 选择tabs
    selectTabs(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    // 获取品牌列表
    async GetList() {
      const that = this;
      const user = Vue.ls.get(USER_DATA);
      let params = {
        store_id:user.identityId,
        page: that.pageno,
        pagesize: that.pagesize,
      };
      let res = await afterSaleList(params);
      if (res.data.code == 1) {
        let data = res.data.data;
        data.list.forEach((item) => {
          item.key = item.id;
          item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss');
        });
        that.listData = data.list;
        that.total = data.count;
      } else {
        showError(res.data.msg);
      }
    },
    // 弹出确定
    async modalSubmit() {
      let that = this;
      that.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (!that.form.logo.length) {
            showError("请上传品牌icon图");
            return;
          }
          let params = {
            title: that.form.title,
            sort: that.form.sort,
            logo: that.form.logo[0].url
              ? that.form.logo[0].url
              : that.form.logo[0],
            type:that.form.type
          };
          if (that.form.id) {
            //编辑
            params.id = that.form.id;
            let res = await GetProductBrandEdit(params);
            if (res.data.code == 1) {
              showSuccess("编辑成功");
              that.modalShow = false;
              that.cancelBtn();
              that.GetList();
            } else {
              showError(res.data.msg);
            }
          } else {
            //新增
            let res = await GetProductBrandAdd(params);
            if (res.data.code == 1) {
              showSuccess("添加成功");
              that.modalShow = false;
              that.cancelBtn();
              that.GetList();
            } else {
              showError(res.data.msg);
            }
          }
        }
      });
    },
    // 弹出取消
    cancelBtn() {
      const that = this;
      that.itemId = null;
      that.afterSaleInfo = {};
    //   that.$refs.ruleForm.resetFields();
    //   that.form.title = "";
    //   that.form.sort = "";
    //   that.form.logo = [];
    //   that.form.id = null;
    //   that.form.type = 1;
      // that.$refs.uploadImg.clearFile()
      that.modalShow = false;
    },

    // 删除品牌
    async DeleteItem(row) {
      const that = this;
      let res = await GetProductBrandDel({ id: row.id });
      if (res.data.code == 1) {
        showSuccess("删除成功");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },
    // 编辑品牌
    toEdit(row) {
      console.log(row);
      const that = this;
      that.itemId = row.id;
      that.modalShow = true;
      that.getAfterSale()
    },
    // 获取售后详情
    async getAfterSale(){
        const that = this;
        let params = {
            id:that.itemId
        }
        let res = await afterSaleDetail(params)
        if(res.data.code == 1){
            let data = res.data.data
            data.refund_img = data.refund_img.split(',')
            that.afterSaleInfo = data
        }else{
            showError(res.data.msg)
        }
    },

    // 售后审核操作
    async handleApply(type,id){
        const that = this;
        let params = {
            id,
            status:type==1?2:3,
            reject_reason:that.reject_reason
        }
        let res = await afterSaleCheck(params)
        if(res.data.code == 1){
            showSuccess(`${type==1?'同意':'拒绝'}成功`)
            that.cancelBtn();
            that.cancelFn()
            that.GetList();
        }else{
            showError(res.data.msg)
        }
    },
    // 拒绝按钮
    openJeject(row){
        const that = this;
        that.itemId = row.id;
        that.rejectShow = true;
    },
    // 拒绝弹出关闭
    cancelFn(){
        const that = this;
        that.itemId = null;
        that.reject_reason = '';
        that.rejectShow = false;
    },
    // 拒绝弹出确认
    okFn(){
        const that = this;
        if(that.reject_reason == ''){
            showError('请输入拒绝原因')
            return   
        }
        that.handleApply(2,that.itemId)
    },


    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }
  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }
  .MianContent {
    padding: 10px 20px 20px 20px;
    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .MainTopActionOne {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }
      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>